<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <link rel="stylesheet" href="elementUI/index.css">
    <link rel="stylesheet" href="./css/register.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="form">
            <div class="title">
                已有账号？<el-button style="color: rgb(95, 103, 219);" type="text"
                    @click="window.location.href='login.html'">去登录</el-button>
            </div>
            <div class="register">注册</div>
            <el-tabs v-model="activeName" class="my-tabs" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="我是员工" name="first">
                    <!-- 员工注册 -->
                    <div class="staff">人员信息</div>
                    <el-form :model="system_user_info1" status-icon :rules="rules" ref="system_user_info1"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item label="公司名称">
                            <el-input class="my-input" v-model="Enterprise_Name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="ID_Name">
                            <el-input v-model="system_user_info1.ID_Name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="ID_SerialNumber">
                            <el-input v-model="system_user_info1.ID_SerialNumber" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="User_Number">
                            <el-input v-model="system_user_info1.User_Number"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="Pass_Ward">
                            <el-input placeholder="数字、字母、下划线任意两种组合"
                                v-model.trim="system_user_info1.Pass_Ward"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass3">
                            <el-input v-model="system_user_info1.checkPass3"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" style=" font-size: 20px;
                                width: 70%;" :loading="loading"
                                @click="submitForm('system_user_info1')">加入企业</el-button>
                            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="我是企业" name="second">
                    <!-- 企业注册 -->
                    <div class="staff">企业信息</div>
                    <el-form :model="enterprise_info" status-icon ref="system_user_info" label-width="100px"
                        class="demo-ruleForm">
                        <el-form-item label="企业名称" prop="Enterprise_Name">
                            <el-input v-model="enterprise_info.Enterprise_Name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="执照编号" prop="Tax_Number">
                            <el-input type="Number" v-model="enterprise_info.Tax_Number"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="staff">管理员信息</div>
                    <el-form :model="system_user_info" status-icon :rules="rules" ref="enterprise_info"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item label="姓名" prop="ID_Name">
                            <el-input v-model="system_user_info.ID_Name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="ID_SerialNumber">
                            <el-input v-model="system_user_info.ID_SerialNumber" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="User_Number">
                            <el-input v-model="system_user_info.User_Number"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="Pass_Ward">
                            <el-input placeholder="数字、字母、下划线任意两种组合"
                                v-model.trim="system_user_info.Pass_Ward"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input v-model="system_user_info.checkPass"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" :loading="loading" style=" font-size: 20px;
                                width: 70%;" @click="submitEnterpriseForm('enterprise_info')">创建企业</el-button>
                            <!-- <el-button @click="resetEnterpriseForm()">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script src="component/layui/layui.js"></script>
    <script src="component/pear/pear.js"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="elementUI/index.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="./js/ID_Validity.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                var pwdValidator2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.system_user_info.Pass_Ward) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                var pwdValidator3 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.system_user_info1.Pass_Ward) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                //校验身份证号
                var validatePass3 = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入身份证号'));
                    } else {
                        callback();
                    }
                    // setTimeout(() => {
                    //     if (!ID_Validity(value)) {
                    //         callback(new Error('请输入正确的身份证号'));
                    //     } else {
                    //         callback();
                    //     }
                    // }, 100);
                }
                var validatePass4 = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入手机号'));
                    }
                    setTimeout(() => {
                        if (!validatemobile(value)) {
                            callback(new Error('请输入正确的手机号'));
                        } else {
                            callback();
                        }
                    }, 100);
                }

                //密码校验
                function pwdValidator(_, value, callback) {
                    if (/^(?![\d]+$)(?![a-zA-Z]+$)(?![_]+$)[\da-zA-Z_]{6,20}$/.test(value)) {
                        callback();
                    } else {
                        callback(new Error("数字、字母、下划线任意两种组合，且不能少于6位"));
                    }
                }
                // 姓名校验
                function isValidName(_, value, callback) {
                    if (!value) {
                        return callback(new Error('请输入姓名'))
                    } else {
                        callback();
                    }
                }
                // 执照编码校验
                function Tax_Number(_, value, callback) {
                    if (!value) {
                        return callback(new Error('请输入执照编码'))
                    } else {
                        callback();
                    }
                }
                /**
             * 公司名称校验
             * */
                var companyNameC = (rule, value, callback) => {
                    //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
                    const re = /^[\u4e00-\u9fa5]+$/
                    if (!value) {
                        return callback(new Error('请输入公司名称'))
                    }
                    setTimeout(() => {
                        if (re.test(value.trim())) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的公司名称'))
                        }
                    }, 100)
                }
                return {
                    activeName: 'first',
                    loading: false,
                    Enterprise_Name: '',
                    system_user_info1: {
                        checkPass3: '',
                        Enterprise_Info_SerialNumber: '',
                        ID_Name: '',
                        ID_SerialNumber: '',
                        Pass_Ward: '',
                        User_Number: '',
                        Row_Status: '1'
                    },
                    enterprise_info: {
                        Enterprise_Info_SerialNumber: '',
                        Enterprise_Name: '',
                        Tax_Number: '',
                        Industry_SubCategory_SerialNumber: 'I01000000000001',
                        Industry_Category_SerialNumber: 'I00000000000001'
                    },
                    system_user_info: {
                        checkPass: '',
                        Enterprise_Info_SerialNumber: '',
                        ID_Name: '',
                        ID_SerialNumber: '',
                        Pass_Ward: '',
                        User_Number: ''
                    },
                    // 表单校验
                    rules: {
                        Pass_Ward: [
                            { validator: pwdValidator, trigger: 'blur' }
                        ],
                        checkPass: [
                            { validator: pwdValidator2, trigger: 'blur' }
                        ],
                        checkPass3: [
                            { validator: pwdValidator3, trigger: 'blur' }
                        ],
                        ID_SerialNumber: [
                            { validator: validatePass3, trigger: 'blur' }
                        ],
                        ID_Name: [
                            { validator: isValidName, trigger: 'blur' }
                        ],
                        User_Number: [
                            { validator: validatePass4, trigger: 'blur' }
                        ],
                        Enterprise_Name: [
                            { validator: companyNameC, trigger: 'blur' }
                        ],
                        Tax_Number: [
                            { validator: Tax_Number, trigger: 'blur' }
                        ],
                    }
                };
            },
            mounted() {
                // this.getData()
            },
            methods: {
                // tab栏切换
                handleClick(tab, event) {
                    console.log(tab)
                },
                // 提交员工表单
                submitForm(formName) {
                    this.loading = true
                    console.log(formName)
                    let _this = this
                    _this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.ajax({
                                url: DomainName + '/Register_Employee',
                                type: 'POST',
                                data: {
                                    system_user_info: JSON.stringify({ system_user_info: [_this.system_user_info1] }),
                                    Enterprise_Name: _this.Enterprise_Name
                                },
                                success: function (result) {
                                    console.log(result);
                                    if (result.Status == "success") {
                                        _this.$message({
                                            message: '注册成功,等待审核...',
                                            type: 'success'
                                        });
                                        // window.location.href = 'index.html';
                                    } else {
                                        _this.$message.error(result.Cause);
                                    }
                                },
                                error: function (params) {
                                    console.log(params);
                                },
                                complete: function () { _this.loading = false }
                            })
                        } else {
                            _this.loading = false
                            return false;
                        }
                    });
                },
                // 提交企业表单
                submitEnterpriseForm(formName) {
                    // this.loading = true
                    // console.log(1)
                    let _this = this
                    // // 表单验证
                    // let list = [];
                    // list.push(
                    //     _this.checkForm("system_user_info"),
                    //     _this.checkForm("enterprise_info"),
                    // );
                    // Promise.all(list)
                    //     .then(() => {
                    //     })
                    //     .catch(() => {
                    //     })
                    // _this.loading = false
                    if (_this.enterprise_info.Enterprise_Name == '' || _this.enterprise_info.Enterprise_Name.Tax_Number == '') return _this.$message.error('请完善企业信息');
                    _this.loading = true
                    _this.$refs[formName].validate(valid => {
                        if (valid) {
                            // 发送请求
                            $.ajax({
                                url: DomainName + '/Register_Enterprise',
                                type: 'POST',
                                data: {
                                    system_user_info: JSON.stringify({ system_user_info: [_this.system_user_info] }),
                                    enterprise_info: JSON.stringify({ enterprise_info: [_this.enterprise_info] })
                                },
                                success: function (result) {
                                    console.log(result);
                                    if (result.Status == "success") {
                                        _this.loading = true
                                        _this.$message({
                                            message: '恭喜你，提交成功',
                                            type: 'success'
                                        });
                                        // window.location.href = 'login.html';
                                    } else {
                                        _this.$message.error(result.Cause);
                                    }
                                },
                                error: function (params) {
                                    console.log(params);
                                },
                                complete: function () { _this.loading = false }
                            })
                        }
                    });
                },
                // 最终验证
                // checkForm(formName) {
                //     return new Promise((resolve, reject) => {
                //         resolve()
                //         reject()
                //     }).then(
                //         () => {

                //         },
                //         () => { console.log('error') }
                //     )
                // }
            },
        })
    </script>
</body>

</html>